<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./css/global.css" />
  <link rel="stylesheet" href="./css/editor.css" />
  <link rel="stylesheet" href="./css/index.css" />
  <link rel="stylesheet" href="./css/all.min.css" />
  <link rel="stylesheet" href="./css/article.css" />
  <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet" />
  <script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
  <title>Document</title>
</head>

<body>
  <div class="post" id="body-wrap">
    <header class="post-bg" id="page-header" style="background-image: url('./assets/article.jpg')">
      <div id="post-info">
        <h1 class="post-title"> 文 章 发 表 </h1>
      </div>
    </header>
    <main class="layout" id="content-inner">
      <div id="post">
        <div class="container">
          <form action="">
            <label for="title">文章标题：</label>
            <input id="title" type="text" />

            <label for="editor">文章内容：</label>
            <div id="toolbar">
              <button class="ql-bold">Bold</button>
              <button class="ql-italic">Italic</button>
              <button class="ql-link">link</button>
              <button class="ql-image">image</button>
            </div>
            <div id="editor"></div>

            <label>文章来源：
              <label for="original"><input id="original" name="source" type="radio" />原创</label>
              <label for="transport"><input id="transport" name="source" type="radio" />转载</label>
            </label>

            <label for="field">发布板块：
              <select name="field" id="field">
                <option value="HTML">HTML</option>
                <option value="CSS">CSS</option>
                <option value="JavaScript">JavaScript</option>
              </select>
            </label>

            <input style="width: 100px;background-color: var(--btn-bg)!important;color: white;" class="button" type="submit" value="发表">
          </form>
        </div>
      </div>

      <div class="aside-content" id="aside-content">
        <div class="card-widget card-info">
          <div class="is-center">
            <div class="avatar-img">
              <img src="./assets/avatar.jpg" class="entered loaded" />
            </div>
            <div class="author-info__name">浪客剑心</div>
            <div class="author-info__description">轻风碎月 静夜凝思</div>
          </div>
          <div class="card-info-data is-center">
            <div class="card-info-data-item">
              <a href="javascript:void(0);">
                <div class="headline">文章</div>
                <div class="length-num">47</div>
              </a>
            </div>
            <div class="card-info-data-item">
              <a href="javascript:void(0);">
                <div class="headline">标签</div>
                <div class="length-num">57</div>
              </a>
            </div>
            <div class="card-info-data-item">
              <a href="javascript:void(0);">
                <div class="headline">分类</div>
                <div class="length-num">27</div>
              </a>
            </div>
          </div>
          <a id="card-info-btn" href="javascript:void(0);"><i class="fab fa-github"></i><span>Follow Me</span></a>
        </div>
        <div class="sticky_layout">
          <div class="card-widget card-recent-post">
            <div class="item-headline">
              <i class="fas fa-history"></i><span>最新文章</span>
            </div>
            <div class="aside-list">
              <div class="aside-list-item">
                <a class="thumbnail" href="javascript:void(0);" title="《卓有成效的工程师》摘录"><img src="./assets/article.jpg"
                    alt="《卓有成效的工程师》摘录" class="entered loaded" /></a>
                <div class="content">
                  <a class="title" href="javascript:void(0);" title="《卓有成效的工程师》摘录">《卓有成效的工程师》摘录</a><time
                    datetime="2023-09-04T12:48:53.000Z" title="发表于 2023-09-04 20:48:53">2023-09-04</time>
                </div>
              </div>
              <div class="aside-list-item">
                <a class="thumbnail" href="javascript:void(0);" title="《原则》摘录"><img src="./assets/article.jpg"
                    alt="《原则》摘录" class="entered loaded" /></a>
                <div class="content">
                  <a class="title" href="javascript:void(0);" title="《原则》摘录">《原则》摘录</a><time
                    datetime="2023-06-22T15:36:02.000Z" title="发表于 2023-06-22 23:36:02">2023-06-22</time>
                </div>
              </div>
              <div class="aside-list-item">
                <a class="thumbnail" href="javascript:void(0);" title="《思考，快与慢》摘录"><img src="./assets/article.jpg"
                    alt="《思考，快与慢》摘录" class="entered loaded" /></a>
                <div class="content">
                  <a class="title" href="javascript:void(0);" title="《思考，快与慢》摘录">《思考，快与慢》摘录</a><time
                    datetime="2023-04-25T15:36:54.000Z" title="发表于 2023-04-25 23:36:54">2023-04-25</time>
                </div>
              </div>
              <div class="aside-list-item">
                <a class="thumbnail" href="javascript:void(0);" title="《异类：不一样的成功启示录》摘录"><img src="./assets/article.jpg"
                    alt="《异类：不一样的成功启示录》摘录" class="entered loaded" /></a>
                <div class="content">
                  <a class="title" href="javascript:void(0);" title="《异类：不一样的成功启示录》摘录">《异类：不一样的成功启示录》摘录</a><time
                    datetime="2023-04-19T15:01:41.000Z" title="发表于 2023-04-19 23:01:41">2023-04-19</time>
                </div>
              </div>
            </div>
          </div>
          <div class="card-widget card-categories">
            <div class="item-headline">
              <i class="fas fa-folder-open"></i>
              <span>分类</span>
              <a class="card-more-btn" href="javascript:void(0);" title="查看更多">
                <i class="fas fa-angle-right"></i></a>
            </div>
            <ul class="card-category-list" id="aside-cat-list">
              <li class="card-category-list-item">
                <a class="card-category-list-link" href="javascript:void(0);"><span
                    class="card-category-list-name">Booknote</span><span class="card-category-list-count">11</span></a>
                <ul class="card-category-list child">
                  <li class="card-category-list-item">
                    <a class="card-category-list-link" href="javascript:void(0);"><span
                        class="card-category-list-name">专业技能</span><span class="card-category-list-count">2</span></a>
                  </li>
                  <li class="card-category-list-item">
                    <a class="card-category-list-link" href="javascript:void(0);"><span
                        class="card-category-list-name">人际交往</span><span class="card-category-list-count">1</span></a>
                  </li>
                  <li class="card-category-list-item">
                    <a class="card-category-list-link" href="javascript:void(0);"><span
                        class="card-category-list-name">原则</span><span class="card-category-list-count">1</span></a>
                  </li>
                  <li class="card-category-list-item">
                    <a class="card-category-list-link" href="javascript:void(0);"><span
                        class="card-category-list-name">史记</span><span class="card-category-list-count">1</span></a>
                  </li>
                  <li class="card-category-list-item">
                    <a class="card-category-list-link" href="javascript:void(0);"><span
                        class="card-category-list-name">学习能力</span><span class="card-category-list-count">1</span></a>
                  </li>
                  <li class="card-category-list-item">
                    <a class="card-category-list-link" href="javascript:void(0);"><span
                        class="card-category-list-name">工程师</span><span class="card-category-list-count">1</span></a>
                    <ul class="card-category-list child">
                      <li class="card-category-list-item">
                        <a class="card-category-list-link" href="javascript:void(0);"><span
                            class="card-category-list-name">效能</span><span class="card-category-list-count">1</span></a>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </main>

    <footer id="footer">
      <div id="footer-wrap">
        <div class="copyright">Copyright © 2024 师大云技术有限公司</div>
        <div class="framework-info">
          <span>Powered by .NET 5.0 on Kubernetes</span>
        </div>
      </div>
    </footer>
  </div>

  <div id="rightside">
    <div id="rightside-config-show">
      <button id="rightside_config" type="button" title="设置">
        <i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部">
        <i class="fas fa-arrow-up"></i>
      </button>
    </div>
  </div>

  <script>
    var editor = new Quill("#editor", {
      modules: { toolbar: "#toolbar" },
      theme: "snow",
      placeholder: "请输入内容......",
    });
    function goBack() {
      history.back();
    }
  </script>

  <script defer="defer" id="ribbon" src="./js/canvas-ribbon.min.js" size="150" alpha="0.6" zindex="-1" mobile="false"
    data-click="true"></script>
</body>

</html>